<template>
  <div class="app-container">
    <el-row :gutter="40" class="panel-group">
      <el-col v-for="item in crud.data" :key="item.index" :xs="7" :sm="7" :lg="5" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-people" @click="toProjectPage(item.id)">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              <span>{{ item.name }}</span>
            </div>
            <div class="card-panel-cog-wrapper">
              <svg-icon icon-class="cog" class-name="card-panel-cog" @click.native="crud.toEdit(item)" />
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :closed="closed"
      :visible.sync="crud.status.cu > 0"
      :title="crud.status.title"
      width="30%"
    >
      <el-form ref="form" :model="form" :inline="true" :rules="rules" size="small" label-width="80px">
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="form.name" style="width: 370px;" />
        </el-form-item>
        <!--<el-form-item label="图片地址" hidden>
          <el-input v-model="form.imgUrl" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="是否星标">
          <el-switch v-model="form.isStar" style="width: 130px;" />
        </el-form-item>-->
        <el-form-item label="开始日期" prop="createTime" hidden>
          <el-date-picker v-model="form.createTime" style="width: 370px;" />
        </el-form-item>
        <!--<el-form-item label="指定分组">
          <el-popover
            placement="right"
            width="400"
            trigger="click"
            @after-leave="selGroupHid"
          >-->
        <!-- 选择项目分组 -->
        <!--<el-form v-if="true === notAddGroup" :model="form" :inline="true" :rules="rules" class="demo-form-inline">
              <h3 style="margin-left: 40%">项目分组</h3>
              <el-form-item prop="groupName">
                <el-autocomplete
                  v-model="form.group.name"
                  :fetch-suggestions="queryAddDetail"
                  placeholder="搜索项目分组"
                  style="width: 370px"
                  property="search"
                  clearable
                  @select="handleSelect"
                />
              </el-form-item>
              <el-form-item style="width: 100%">
                <div>
                  <el-link icon="el-icon-plus" @click="addGroupVis">添加分组</el-link>
                </div>
              </el-form-item>
            </el-form>-->
        <!-- 创建表单 -->
        <!--  <el-form v-if="false === notAddGroup" ref="groupDataForm" :model="groupDataForm" :rules="groupDataRules">
              <h3 style="margin-left: 40%">创建项目分组</h3>
              <el-form-item label="分组名称" prop="groupName">
                <el-input v-model="groupDataForm.groupName" placeholder="输入分组名称" />
              </el-form-item>
              <div>
                <el-button type="primary" style="float: right" :loading="groupLoad" @click.native="submitGroup">确认</el-button>
              </div>
            </el-form>
            <el-input slot="reference" v-model="form.group.name" style="width: 140px" placeholder="请选择" />
          </el-popover>
        </el-form-item>-->
        <el-form-item label="项目描述" prop="project['remark']">
          <el-input v-model="form.project.remark" rows="5" type="textarea" style="width: 370px;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import crudDept from '@/api/system/dept'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
// import crudOperation from '@crud/CRUD.operation'

const defaultForm = {
  id: 0,
  name: null,
  pid: null,
  detail: null,
  project: { id: null, remark: null },
  system: null
}
export default {
  components: { },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD(
      { title: '部门', url: 'api/dept', crudMethod: { ...crudDept }}
    )
  },
  props: {
    groupName: {
      type: String,
      required: true
    },
    groupId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      rules: {
        name: [
          { required: true, message: '项目名称不能为空', trigger: 'blur' }
        ],
        gmtCreate: [
          { required: true, message: '项目开始日期不能为空', trigger: 'blur' }
        ]
      },
      groupDataRules: {
        groupName: [
          { required: true, message: '分组名称不能为空', trigger: 'blur' }
        ]
      },
      groupsArr: [],
      notAddGroup: true,
      groupLoad: false
      /* groupDataForm: {
        id: 0,
        groupName: ''
      }*/
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      crudDept.getDepts({ pid: this.groupId, isAdmin: 0 }).then(res => {
        this.crud.data = res.content
        this.crud.resetDataStatus()
      })
      return false
    },
    /* [CRUD.HOOK.afterValidateCU](crud) {
      if (!crud.form.group.id) {
        this.$message({
          message: '分组不能为空',
          type: 'warning'
        })
        return false
      }
      return true
    },
    [CRUD.HOOK.beforeSubmit](crud) {
    },*/
    handleSetSysData(projectId) {
      this.$emit('handleSysData', projectId)
    },
    closed() {
      this.$refs['form'].resetFields()
    },
    /* async getAddDetailData(groupName) {
      // 获取全部分组
      crudGroup.query().then(data => {
        this.groupsArr = data.content
        this.groupsArr.forEach(item => {
          item.value = item.groupName
        })
      })
    },
    queryAddDetail(queryString, cb) {
      this.getAddDetailData(queryString)
      const results = queryString ? this.groupsArr.filter(this.createFilter(queryString)) : this.groupsArr
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (state) => {
        return (state.value.indexOf(queryString) === 0)
      }
    },
    handleSelect(item) {
      this.form.groupName = item.groupName
      this.form.group.id = item.id
    },
    submitGroup() {
      this.$refs['groupDataForm'].validate((valid) => {
        if (valid) {
          crudGroup.add(this.groupDataForm).then(item => {
            this.addGroupVis()
          })
        }
      })
    },
    addGroupVis() {
      this.notAddGroup = !this.notAddGroup
    },
    selGroupHid() {
      this.notAddGroup = true
      this.groupDataForm.groupName = ''
      this.groupDataForm.id = 0
      this.$refs['groupDataForm'].clearValidate()
    },
    submitVis() {
      this.groupLoad = !this.groupLoad
    },*/
    toProjectPage(projectId) {
      this.$router.push({ name: 'Storage', params: { projectId: projectId }})
    }
  }
}
</script>

<style lang="scss" scoped>
  .panel-group {
    margin-top: 18px;

    .card-panel-col {
      margin-bottom: 32px;
    }

    .card-panel {
      height: 108px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      border-color: rgba(0, 0, 0, .05);
      border-radius: 10px;

      &:hover {
        .card-panel-icon-wrapper {
          color: #fff;
        }

        .icon-people {
          background: #40c9c6;
        }
      }

      .icon-people {
        color: #40c9c6;
      }

      .card-panel-icon-wrapper {
        float: left;
        margin: 14px 0 0 14px;
        padding: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }

      .card-panel-cog-wrapper{
        float: left;
        margin: 1px 0 0 1px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
        :hover {
          color: #13ce66;
        }
      }

      .card-panel-icon {
        float: left;
        font-size: 48px;
      }

      .card-panel-cog {
        float: left;
        font-size: 20px;
      }

      .card-panel-description {
        float: right;
        font-weight: bold;
        margin: 26px;

        .card-panel-text {
          line-height: 18px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          margin-bottom: 12px;
        }

        .card-panel-num {
          font-size: 20px;
        }
      }
    }
  }

  @media (max-width: 550px) {
    .card-panel-description {
      display: none;
    }

    .card-panel-icon-wrapper {
      float: none !important;
      width: 100%;
      height: 100%;
      margin: 0 !important;

      .svg-icon {
        display: block;
        margin: 14px auto !important;
        float: none !important;
      }
    }
  }
</style>
